<template>
  <div class="row" v-loading="loading">
    <div class="col-lg-3 col-md-6 mb-3" v-for="(item, index) in list" :key="index">
      <panel-statistic-item :statistic-data="item"></panel-statistic-item>
    </div>
    <div class="col-lg-3 col-md-6 mb-3">
      <panel-statistic-item :statistic-data="agencyData"></panel-statistic-item>
    </div>

    <div class="col-lg-3 col-md-6 mb-3">
      <panel-statistic-item :statistic-data="loanData"></panel-statistic-item>
    </div>

    <gov-agency-dialog :visible.sync="govAgencyVisible"></gov-agency-dialog>
    <bank-agency-dialog :visible.sync="bankAgencyVisible"></bank-agency-dialog>
    <credit-agency-dialog :visible.sync="creditAgencyVisible"></credit-agency-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

import PanelStatisticItem from '@/credit/views/city/index/PanelStatisticItem'
import GovAgencyDialog from '@/credit/views/city/index/GovAgencyDialog'
import BankAgencyDialog from '@/credit/views/city/index/BankAgencyDialog'
import CreditAgencyDialog from '@/credit/views/city/index/CreditAgencyDialog'
import { add } from '@vimi/utils-tool'

export default {
  components: {
    PanelStatisticItem,
    GovAgencyDialog,
    BankAgencyDialog,
    CreditAgencyDialog,
  },
  props: {},
  data() {
    return {
      list: [
        {
          name: '累积项目数',
          num: 0,
          icon: 'fa-users',
          color: '#42bd56',
          child: [
            { name: '待查', num: 0 },
            { name: '待审', num: 0 },
            { name: '在保', num: 0 },
            { name: '解保', num: 0 },
          ],
        },
        {
          name: '在保余额(万元)',
          num: 0,
          icon: 'fa-cny',
          color: '#f4516f',
          child: [
            { name: '累积保额', num: 0 },
            { name: '已解保额', num: 0 },
          ],
        },
      ],
      loading: false,

      govAgencyVisible: false,
      bankAgencyVisible: false,
      creditAgencyVisible: false,
    }
  },
  computed: {
    ...mapGetters([
      'user',
      'clientId',
      'govAgencyTotal',
      'bankAgencyTotal',
      'creditAgencyTotal',
      'warningCount',
    ]),
    agencyData() {
      return {
        name: '合作机构数',
        num: this.govAgencyTotal + this.bankAgencyTotal + this.creditAgencyTotal,
        icon: 'fa-briefcase',
        color: '#34bfa3',
        child: [
          { name: '银行机构', num: this.bankAgencyTotal, onClick: this.openBankAgency },
          { name: '政府机构', num: this.govAgencyTotal, onClick: this.openGovAgency },
          { name: '联盟成员', num: this.creditAgencyTotal, onClick: this.openCreditAgency },
        ],
      }
    },
    loanData() {
      return {
        name: '在保项目数',
        num: this.list[0].child[2].num,
        icon: 'fa-folder',
        color: '#FFC107',
        onClick: this.linkToInLoan,
        child: [
          {
            name: '即将到期',
            num: this.warningCount.will_expire_total || 0,
            onClick: () => this.linkToLoan(1),
          },
          {
            name: '到期未解保',
            num: this.warningCount.expire_total || 0,
            onClick: () => this.linkToLoan(3),
          },
        ],
      }
    },
    tableName() {
      const enumTable = {
        1: 'credit_project_total_pro',
        2: 'credit_project_total_view',
        3: 'credit_project_total_qx_view',
      }
      return enumTable[this.user.orgRegionLever]
    },
  },
  watch: {},
  created() {
    this.getWarningCount()
    this.getData()
  },
  mounted() {},
  methods: {
    linkToInLoan() {
      this.$router.push('/credit/loan/in_loan')
    },
    linkToLoan(status) {
      this.$router.push({
        path: '/credit/loan/un_loan',
        query: {
          status,
        },
      })
    },
    async getWarningCount() {
      this.$store.dispatch('getWarningCount')
    },
    async getData() {
      const params = {
        'service_id.eq': this.clientId,
      }
      if (this.user.orgRegionLever === 1) {
        params.isBIQuery = 1
      }

      this.loading = true
      let [res] = await this.$utils.promise(
        this.$api.getData(this.$serviceName, this.tableName, params)
      )
      this.loading = false

      const data = (res && res.data && res.data.length && res.data[0]) || {}

      this.list[0].child[0].num = +data.to_invest_total || 0
      this.list[0].child[1].num = +data.to_approval_total || 0
      this.list[0].child[2].num = +data.in_gua_total || 0
      this.list[0].child[3].num = +data.un_gua_total || 0
      this.list[0].num = +data.project_total || 0

      this.list[1].child[0].num = add(data.un_gua_funds, data.in_gua_funds)
      this.list[1].child[1].num = +data.un_gua_funds || 0
      this.list[1].num = +data.in_gua_funds || 0
    },
    openGovAgency() {
      this.govAgencyVisible = true
    },
    openBankAgency() {
      this.bankAgencyVisible = true
    },
    openCreditAgency() {
      this.creditAgencyVisible = true
    },
  },
}
</script>
<style scoped lang="scss"></style>
